<template>
  <div>
    <div class="recommend-title">
      商品列表<span @click="goback" class="back">返回</span
      ><span @click="add" class="add">新增</span>
    </div>
    <ul>
      <li
        class="item border-bottom"
        v-for="item of list"
        :key="item.recommendId"
      >
        <div class="item-img-wrapper">
          <img class="item-img" :src="imgBaseURL + item.imgUrl" />
        </div>
        <div class="item-info">
          <p class="item-title">{{ item.title }}</p>
          <p class="item-desc">{{ item.desc }}</p>
          <button @click="del(item)" class="item-more">删除</button>
          <button @click="edit(item)" class="item-more">修改</button>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
/* eslint-disable */
import axios from "axios";
export default {
  name: "RecommendList",
  props: {
    list: Array,
  },
  data() {
    return {
      imgBaseURL: process.env.BASE_API,
    };
  },
  methods: {
    del: function (item) {
      console.log(item);
      axios.defaults.baseURL = process.env.BASE_API;
      axios
        .get("/api/recommend/del/" + item.recommendId)
        .then(this.list.splice(this.list.indexOf(item), 1));
    },
    add: function () {
      var param = {
        imgUrl: "",
        title: "标题",
        desc: "描述",
      };
      axios.defaults.baseURL = process.env.BASE_API;
      axios
        .post("/api/recommend/add/", param)
        .then((item) => this.list.push(item));
    },
    edit: function (item) {
      this.$router.push({
        path: "/recommend/edit",
        query: { recommendId: item.recommendId },
      });
    },
    addPic: function (e) {
      var that = this;
      let formData = new window.FormData();
      for (let i = 0; i < e.target.files.length; i++) {
        formData.append("file", e.target.files[i]);
        let ext = e.target.files[i].name.split(".")[1];
        if (!(ext === "jpg" || ext === "png" || ext === "jpeg")) {
          console.log("格式错误");
          return;
        }
        axios.post("/api/recommend/add", formData).then(this.uploadSucc);
      }
    },
    uploadSucc: function () {
      console.log("显示图片");
      this.$parent.getRecommend();
    },
    goback: function () {
      this.$router.back(-1);
    },
  },
  activated() {
    this.$parent.getRecommend();
  },
};
</script>
<style scoped>
.recommend-title {
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  line-height: 0.8rem;
  background: #eee;
  text-indent: 0.2rem;
}

.item {
  overflow: hidden;
  display: flex;
  height: 1.9rem;
  margin-left: 0.1rem;
}

.item-img {
  width: 1.7rem;
  height: 1.7rem;
  padding: 0.1rem;
}

.item-info {
  flex: 1;
  padding: 0.1rem;
  min-width: 0;
}

.item-info .item-title {
  line-height: 0.54rem;
  font-size: 0.32rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.item-info .item-desc {
  line-height: 0.4rem;
  color: #ccc;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.item-info .item-more {
  line-height: 0.6rem;
  margin-top: 0.16rem;
  background: #ff9300;
  padding: 0 0.2rem;
  border-radius: 0.05rem;
  color: #fff;
}

.add,
.back {
  color: #ff9300;
  float: right;
  margin-right: 0.16rem;
}
</style>
